<template>
  <view class="shop">
    <nut-avatar size="100" shape="square">
      <img
          :src="data.enterpriseLogo+ImgWaterMarker"
      />
    </nut-avatar>
    <view class="shop-desc">
      <!--标题-->
      <view class="shop-title-box">
        <view class="shop-title">
          {{ data.name }}
        </view>
        <nut-tag class="tag-content" style="padding: 2px 5px;margin: 2px;background: rgba(250, 104, 93, 0.1)">

          <span style="color: rgba(250, 104, 93)">{{ data.productCategoryName }}</span>
        </nut-tag>
      </view>
      <!--联系人-->
      <view class="contact-box">
        {{ data.contactName }}&nbsp;&nbsp;{{ data.contactPhone }}
      </view>
      <!--商家地址-->
      <view class="contact-box">
        商家地址：{{ data.addrDetail }}
      </view>
      <!--经营范围-->
      <view class="shop-busi-range">
        企业介绍：{{data.enterpriseDesc}}
      </view>

    </view>
  </view>
</template>
<script setup>
import {ImgWaterMarker} from "../../api/constant";

const props = defineProps({
  data: {
    type: Object,
    default: {}
  }
});
</script>

<style  >
.shop {
  display: flex;
  justify-content: space-around;

}

.shop-desc {
  margin-left: 15px;

}

.shop-title {
  font-size: 30px;
  font-weight: bolder;
  width: 330px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-title-box {
  display: flex;
  justify-content: space-between;

}

.tag-content {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
}

.contact-box {
  font-size: 24px;
  color: #636363;
  margin-top: 5px;
  width: 450px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-busi-range {
  font-size: 24px;
  color: #636363;
  margin-top: 10px;
  width: 450px;
  height: 60px;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}


</style>